<template> 
        <!--顶部标题  -->
    <div class="container">
      <router-link to="/home/index">
      <div class="title" > 
      <van-icon name="arrow-left" style=" position: absolute;left: 20px;;" />运营时间</div> 
      </router-link>
                <div class="age">   
                 <span></span>
                <span style=" padding-bottom: 0.8em;display: inline-block;">
                 2022年03月</span> </div>
                 <!-- 日历 -->
          <div class="date">
               <van-calendar  
               :poppable="false"
              :show-confirm="false"
               :show-title="false"               
                :lazy-render="true" 
                :show-subtitle="false" 
                :row-height="40"
                />
          </div>
            <!-- 详情模块 -->
          <div class="detalis">
                   <span></span>
                <span >周末及节假日</span>
              <div>
                  <img src="/Myrestaurant1.png" alt=""
                   style=" width:4.6rem ; height:3.1rem;">
                  <p>北京环球影城</p>
                  <p>运营时间 10:00-20:00</p>
              </div> 
                 <div class="detaliss">
                   <img src="/Myrestaurant2.png" alt=""  
                   style=" width:4.6rem ; height:3.1rem;">
                    <p>北京环球城市大道</p>
                    <p>运营时间 08:00-22:00</p>
                  </div>
               <!-- 底部活动 -->
            <div class="activity" >
                   <span>当日活动</span>
                   <img src="/Myrestaurant3.jpg" alt="">
                   <!-- 环球大巡游 字体 -->
                   <div class="adate"> 
                        <p>环球大巡游</p>
                        <p>活动时间 &nbsp;&nbsp; 03/27-03/27</p>
                   </div>
                   <div class="sizi">
                     <div style="letter-spacing:2px; padding-bottom: 5px;">所有乐园时间资料仅供参考</div>
                     <div>可能于您浏览当天做出更改</div>
                   </div>
            </div> 
          </div>
       </div>

</template>

<script>

   
</script>


<style  scoped>
.container{
    width: 100%;
    margin: 0px;    
    padding: 0px;
    margin: 0 auto;  
    background-color: #36d;
}
.container>.title{
    padding-top:1.7em ;
    text-align: center;
     margin: 0 auto;
    font-size: 20px;
    color: white;
    flex-flow: "微软雅黑";
}
.container>.age{
    text-align: center;
    color: white;
    margin-top: 2em; 
    }
/* 日期 */
.container>.date{
  width: 100%;
  height: 270px;
  overflow: hidden;
  border-radius: 15px 15px 0px 0px; 
}
.container>.detalis{
  width: 100%;
  height: 300px;
  background-color: #fff;
  text-align:center;
  position: relative;
}
/* 详情模块 */
.container>.detalis>span:first-child{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: red;
  display: inline-block;
  margin-top:30px ;

}
.container>.detalis>span:nth-child(2){
   color: gray;
   font-size: 10px;
  display: inline-block;
}
.container>.detalis>div:nth-child(3){
  margin-top: 10px;
  width: 300px;
  height: 88px;
background-color:#E5EFFB;
  position: relative;
  color: #36d;
 left: 10%;
 border-radius:10px ;
}

.container>.detalis>div:nth-child(3)>img{
  position: absolute;
  top: 25%;
  left: 10px;
  color: #36d;
}
.container>.detalis>.detaliss{
margin-top: 10px;
  width: 300px;
  height: 88px;
background-color:#E5EFFB;
  position: relative;
  color: #36d;
 left: 10%;
 border-radius:10px ;

}

.container>.detalis>div:nth-child(3)> p {
  position: absolute;
  top:10%;
  left: 100px;
  font-weight: bold;
}
.container>.detalis>div:nth-child(3) > p + p{
  position: absolute;
  top:50px;
  left: 100px;
  font-size: 3px;
}
.container>.detalis>.detaliss img{
   position: absolute;
  top: 25%;
  left: 10px;
  color: #36d;
}

.container>.detalis>.detaliss> p {
  position: absolute;
  top:10%;
  left: 100px;
  font-weight: bold;
}
.container>.detalis>.detaliss> p + p{
  position: absolute;
  top:50px;
  left: 100px;
  font-size: 3px;
}
/* 底部活动 */
.container> .detalis>.activity{
  margin-top: 20px;
  width: 100%;
  height: 400px;   
   border-radius: 20px ;
   text-align: center;
   background-color: #36d;
}
.container>.detalis>.activity>span:first-child{
  display: inline-block;
   font-weight: bolder;
   color: #fff;
   font-size: 20px;
   margin-top: 30px;
}
/* 大巡游模块 */
.container>.detalis>.activity>img{
  margin-top: 25px;
  width: 330px;
  height: 200px;
  border-radius: 15px;
}
.container>.detalis>.activity>div{
   width: 330px;
   height: 80px;
   background-color: #fff;
   position: relative;
   left: 6%;
   top: -100px;
   border-radius: 0px 0px 10px 10px;
}
.container>.detalis>.activity>.adate>p:first-child{
  font-weight: bolder;
  text-align: left;
  font-size: 16px;
  color: black;
  padding: 20px 0px 10px 20px;
}
.container>.detalis>.activity>.adate>p:nth-child(2){
  text-align: left;
  margin: -20px 0px 0px 20px;
  font-size: 4px;
  color: gray;
}
.container>.detalis>.activity>.sizi{
  background-color: #36d;
  margin: 40px 0px 5px 0px;
  color: #fff;
  font-size: 10px;
  
}
</style>
    

<style lang="scss" scoped>

</style>